<template>
    <div class="box">
        <el-card shadow="always" :body-style="{ padding: 0, height: '140px' }" class="text-cont">
            <div class="flex justify-center flex-items-center title">{{ title }}</div>
            <div class="p4 content">
                <div>
                    <h2>{{ content.text }}{{ unit }}</h2>
                </div>
                <div class="flex justify-center flex-items-center">
                    <p>今日<b>{{ content.day }}</b>{{ unit }}</p>
                    <p>本周<i>{{ content.week }}</i>{{ unit }}</p>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
interface PropsType {
    title: string;
    content: {
        text: string;
        day: number;
        week: number
    };
    unit: string;
}
defineProps<PropsType>()

</script>

<style  lang="scss">

.text-cont {
    display: flex;
    flex-direction: column;

    .title {
        height: 42px;
        border-bottom: 1px solid #f6f6f6;
    }

    .content {
        height: 98px;
        display: flex;

        >div {
            width: 50%;

            >h2 {
                line-height: 60px;
                font-size: 26px;
                color: #666666;
                letter-spacing: 5px;
            }

            p {
                font-size: 12px;
                margin-bottom: 15px;

                >b {
                    color: #1aa094;
                    padding: 0 4px;
                }

                i {
                    color: #bd3004;
                    padding: 0 4px;
                }
            }
        }

        >div:nth-of-type(1) {
            border-right: 1px solid #eceff9;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        >div:nth-of-type(2) {
            flex-direction: column;
        }
    }
}
</style>